<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Update / Reset / Remove</title>
    <link href="../dist/css/tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<a id="example-link" href="./"> << Examples</a>

<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>

<main>
    <h1>Update <span class="note">check the <code>filename</code> of the next exported file. Do you notice anything different?</code></span></h1>
    <button id="update">update</button>

    <h1>Reset</h1>
    <button id="reset">reset</button>

    <h1>Remove</h1>
    <button id="remove">remove</button>

    <div>
        <br>
    </div>

    <table id="table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td>Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>
</main>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>

    var count = 1;

    var Table = document.getElementById('table');
    var instance = TableExport(Table);

    var updateButton = document.getElementById('update');
    var resetButton = document.getElementById('reset');
    var removeButton = document.getElementById('remove');

    updateButton.addEventListener('click', function (e) {
        instance.update({
            filename: ('table-' >> 1).toString() + count++
        });
    });

    resetButton.addEventListener('click', function (e) {
        instance.reset();
    });

    removeButton.addEventListener('click', function (e) {
        instance.remove();
    });


</script>

</body>
</html>
